<template>
  <div id="tmpl" class="mui-content">
    <div class="plr">
      <h4 class="title">话题：{{newsinfo.title}}</h4>
      <p>{{newsinfo.modifyTime}}</p>
    </div>
    <div class="comment-nav"><span>热门跟帖</span></div>
    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" v-if="commentIds[0]">
      <li class="mui-table-view-cell" v-for="item in commentIds">
        <div class="mui-table">
          <div class="mui-table-cell mui-col-xs-10">
            <p class="mui-ellipsis comment-name">{{comments[item].user.nickname}}
              {{comments[item].siteName}}{{comments[item].user.location}}</p>
          </div>
          <div class="mui-table-cell mui-col-xs-2 mui-text-right">
            <span class="mui-icon-zan"></span>
            <span class="vote-num">{{comments[item].vote}}</span>
          </div>
        </div>
        <p class="mui-h4" v-html="comments[item].content"></p>
      </li>
    </ul>
    <div v-else class="plr">
      <p>暂时还未有评论</p>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
  import { getnewsinfo, getnewscomment } from '@/api/news'

  export default {
    data () {
      return {
        id: this.$route.params.id,
        newsinfo: {},
        comments: {},
        commentIds: []
      }
    },
    created () {
      this._getnewsinfo()
      this._getnewscomment()
    },
    methods: {
      _getnewsinfo () {
        const id = this.id
        getnewsinfo(id).then((res) => {
          this.newsinfo = res
        })
      },
      _getnewscomment () {
        const id = this.id
        getnewscomment(id).then((res) => {
          let _commId = res.commentIds.toString().split(',')
          let newsCommId = Array.from(new Set(_commId))
          this.commentIds = newsCommId
          this.comments = res.comments
        })
      }
    }
  }
</script>
<style scoped>
  .plr {
    padding: 5px 15px;
  }

  .title {
    font-size: 26px;
    font-weight: 700;
    color: #404040;
    line-height: 36px;
  }

  .comment-nav {
    display: inline-block;
    line-height: 30px;
    background-color: #26a2ff;
    color: #fff;
    padding: 0 10px;
  }

  .comment-name {
    color: #26a2ff;
    font-size: 14px;
  }

  .mui-icon-zan {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-repeat: round;
    background-image: url("../../../static/image/zan.png");
  }

  .vote-num {
    color: #888;
    font-size: 14px;
  }
</style>
